<!DOCTYPE html>
<html>
  <head>
    <title>Nuxeo UI Elements</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes" />
    <script src="/components/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

    <link rel="icon" href="favicon.ico" />
    <script type="module" src="/components/@polymer/iron-component-page/iron-component-page.js"></script>

    <style>
      body {
        --iron-component-page-header-color: #0066ff;
      }

      iron-component-page {
        --iron-doc-accent-color: #0066ff;
      }

      header[main] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding: 15px 20px;
        background-color: #fff;
        box-sizing: border-box;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
      }
      #logo {
        background: url('')
          no-repeat;
        background-size: cover;
        display: inline-block;
        height: 28px;
        width: 160px;
      }
    </style>
  </head>

  <body unresolved>
    <header main>
      <a href="#" id="logo"></a>
    </header>
    <iron-component-page></iron-component-page>
  </body>
</html>
